<template>
    <!-- /e jtbsm-header -->
    <div>

        <div class="m-container">

            <!-- S banner -->
            <!-- <v-banner /> -->
            <!-- E banner -->

            <div class="list-area" v-for="dl in dataList">
                <div class="game-list-wrap">
                    <div class="recom-top recom-list clearfix">
                        <div class="arrow-line">
                            <!-- <i class="l-ico" ></i> -->
                            <h2 class="recom-top-title">{{dl.className}}</h2>
                        </div>
                        <a class="arrow-wrap" href="javascript:void(0)" eid="click/home/1_more"
                            :eid_desc="dl.className" @click="moreLiveInfo(dl.pathName)">更多<i class="arrow-icon"></i></a>
                    </div>
                    <div class="g-list-main clearfix">

                        <a class="clickstat g-link" href="javascript:void(0)" v-for="(item,index) in dl.dataList" :data-uid="index"
                            data-piclist-name="11" ref="home" eid="click/home/11" :eid_desc="item.liveContent" @click="viewDetail(item.liveLink,item.id,item.labelName)">
                            <div class="g-item  ">
                                <div class="g-pic">
                                    <span class="game-name">{{item.className}}</span>
                                    <div class="pic">
                                        <img class="pic-con" :src="item.imgBase">
                                    </div>
                                </div>
                                <p class="title">{{item.liveContent}}</p>
                                <div class="info clearfix">
                                    <img  :data-original="item.imgBase" :src="item.imgBase" :alt="item.hostName" :title="item.hostName">
                                    <span class="nick">{{item.hostName}}</span>
                                    <div class="viewer-wrap">
                                        <i class="viewer-icon"></i>
                                        <!-- <span class="viewer-count">15.1万</span> -->
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import vBanner from '../../common/mobile/m_banner.vue'
    export default {
        data() {
            return {
                dataList: [],
                loading: false,
            }
        },
        components: {
            vBanner
        },
        watch: {
            //切换路由监
            '$route'(toRouter, fromRouter) {
                this.toRouter = toRouter.params.pathMatch;
                this.currentPath = this.toRouter//this.getCurrentTypeCN(this.toRouter);
                this.searchMsg=toRouter.query.searchMsg;
                
                document.body.scrollTop=document.documentElement.scrollTop=0
                this.getData(this.currentPath, this.searchMsg);//初始化页面加载
            }
        },
        mounted() {
            this.toPath = this.$router.history.current.params.pathMatch;//获取路由匹配的参数
            this.currentPath = this.toRouter//this.getCurrentTypeCN(this.toPath);

            this.getData(this.currentPath, this.searchMsg);//初始化页面加载

        },
        methods: {
            getData(currentPath,searchMsg) {

                this.loading = true;

                let params = {};

                params.pageSize=4;
                params.currentPath=currentPath;
                params.searchMsg=searchMsg;
                this.$axios.post('/api/projectApi/getNavigationList', params).then((res) => {

                    if (res.data.code == "0") {

                        this.dataList = res.data.data;

                        this.loading = false;

                    }
                    else {
                        this.$message.error(res.data.message)
                    }
                }, (err) => {

                }).then(() => {

                }, (err) => {
                    this.loading = false;

                })
            },

            //点击记录点击量
            viewDetail(href, id, labelName) {
                // //记录连接点击量
                this.recordHits(id, labelName);

                window.open(href, 'top');

            },

            //记录点击量
            recordHits(id, labelName) {
                let params = {};
                params.id = id;
                params.labelName = labelName;
                params.ip = ('IP地址:' + returnCitySN["cip"] + ', CID:' + returnCitySN["cid"] + ', 地区:' + returnCitySN["cname"] + ",浏览器版本:" + getBrowserInfo());

                this.$axios.post('/api/projectApi/recordHits', params).then((res) => {
                    if (res.data) {
                    }
                }, (err) => {
                }).then(() => {

                }, (err) => {
                })
            },
            moreLiveInfo(pathName) {
                
                this.$router.push({
                    path: pathName
                });
            }
        }
    }
</script>

<style scoped>
    .p-loading {

        color: #ed4856;
        font-size: 16px;
    }

    .wrap-recGameLive {
        padding: 0 20px;
    }
    .g-item  .info img {
        float: left;
        width: 24px;
        height: 24px;
        border-radius: 50%;
    }
    .g-link .g-item .info .nick {
        float: left;
        max-width: 40%;
        white-space: nowrap;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
        word-break: normal;
        vertical-align: middle;
        margin-left: 5px;
    }
    .g-link .g-item .info {
        color: #999;
        padding: 3px;
        height: 13px;
        line-height: 20px;
        font-size: 11px;
    }
    .g-link .g-item .title{
        padding: 5px 3px 0;
    }
    .m-container{
        padding-top: 0px;
    }
</style>